<template>
  <div class="user-table">
    <h3>{{customData ? customData.name : ''}}</h3>
    <el-tabs v-model="activeName">
      <el-tab-pane label="基本信息" name="info"></el-tab-pane>
      <el-tab-pane label="项目" name="point"></el-tab-pane>
    </el-tabs>
    <component :is="activeName" :paramId="paramId" :customData="customData" @getPointFn="getDetail"/>
  </div>
</template>

<script>
import info from "./components/info";
import contract from "./components/contract";
import invoice from "./components/invoice";
import point from "./components/points";
import {getCustom} from '@/api/system/custom.js'

export default {
  name: "coustomDetail",
  components: {
    info,
    contract,
    invoice,
    point
  },
  data() {
    return {
      activeName: 'info',
      paramId: 0,
      customData: null,
    };
  },
  created(){
    // customId
    this.paramId = this.$route.params && this.$route.params.customId;
    this.getDetail()
  },
  methods: {
    getDetail() {
      getCustom(this.paramId).then(response => {
        this.customData = response.data
      });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    }
  }
}
</script>

<style scoped>
.user-table {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
}
</style>
